<script setup lang="ts">

import {onMounted, ref} from "vue";
import Edit from './edit.vue'
import api from './api'

const editDialog = ref();

const list = ref([]);

async function getDeviceList() {
  const response = await api.list();
  list.value = response.data;
}

function handleAdd() {
  editDialog.value.open();
}

function handleEdit(row) {
  editDialog.value.open(row);
}

onMounted(async ()=>{
  await getDeviceList();
})

</script>

<template>
  <div>

    <div>
      <el-button @click="handleAdd">增加</el-button>
    </div>

    <div style="margin-bottom: 20px;">
      设备列表：
    </div>

    <vxe-table :data="list">
      <vxe-column field="name" title="名称"></vxe-column>

      <vxe-column field="name" title="操作">
        <template #default="{row}">
          <el-button type="primary" link @click="handleEdit(row)">修改</el-button>
        </template>
      </vxe-column>
    </vxe-table>



    <Edit ref="editDialog"></Edit>

  </div>
</template>

<style scoped>

</style>